<template>
  <commonPage :showHeader="true">
    <scroller
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
  
    <div class="all">

        <div class="top">
            <div class="top-l">
                <p>鹿城文明大脑督办系统</p>
            </div>
            <div class="top-r">
                <div class="touxiang">
                
                </div>
                <p>点位自查人</p>
            </div> 
        </div>
        <div class="middle">
            <div class="content">
                <img src="@/assets/img/lajie.png" width="100%">
                <p class="name">温州市拉洁网吧</p>
                <div class="biaoqian">
                    <div>组别:1</div>
                    <div>滨江街道</div>
                    <div>网吧</div>
                </div>
                <p class="wanggeyuan">网格员:傅子凯</p>
                <p class="fuzeren">负责人:李昊<span>联系方式：13712302987</span></p>
                <div class="dizhi">
                    <p class="z-dizhi">地址：温州市黎明工业区55-57号二楼</p>
                    <div class="daohang"><img src="@/assets/img/daohang.png">
                        导航</div>
                </div>
                <div class="jiancha">
                    <div>未检查</div>
                    <p>本月自查状态：未自查</p>
                </div>
            </div>
            <div class="record">
                <div>
                    <div class="ti">
                        <div class="xian"></div>
                        <p>督办记录</p>
                    </div>
                    <ol>
                        <li v-for="(con,index) in text" :key="index">
                            <p>
                            <span>{{index+1}}、{{con.title}}</span>
                            <span>{{con.date}}</span>
                            </p>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="button">
            自查登记
        </div>
    
  

    </div>
     
    </scroller>
  </commonPage>
</template>
<script>
import commonPage from "../components/common/commonPage";
export default {
  name: "duban2",
  data() {
    return {
      text:[
          {
            title:"***********",
            date:"2021-06-08"
          },{
            title:"******",
            date:"2021-06-01"
          },{
            title:"***********",
            date:"2021-06-08"
          },{
            title:"******",
            date:"2021-06-01"
          }
      ]
    };
  },
  created() {
    
  },
  components: {
    commonPage,
  },
  methods: {
    
    
  },

};
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.all{
  width: 100%;
  position: relative;   
}
.top{
  width: 92%;
  height: 2.75rem;
  display: flex;
  justify-content: space-between;
  background: white;
  line-height: 2.75rem;
  padding-left: 4%;
  padding-right: 4%;
}
.top-l{

}
.top-l > p{
  background-image: linear-gradient(#0063b3,#198de4,#57b1fd);
  -webkit-background-clip:text;
  color: transparent;

}
.top-r{
  display: flex;
}
.top-r > p{
  color: #7d8a93;
}
.touxiang{
  width: 1.2rem;
  height: 1.2rem;
  background: gray;
  border-radius: 6px;
  margin: auto 0.3rem;
}
.middle{
    padding: 1.2rem;
    background: #f5f5f5;
}
.content{
    width: 100%;
    background: white;
    border-radius: 5px;
}
.content >img{
    border-radius: 7px 7px 0px 0px;
}
.name{
    padding-left: 0.5rem;
    font-size: 1.5rem;
    color: #013b65;
    line-height: 180%;
}
.biaoqian{
    padding-left: 0.5rem;
    display: flex;
    padding-bottom: 0.5rem;
}
.biaoqian > div{
    margin-right: 0.5rem;
    padding: 0 0.3rem;
    border-radius: 10px;
    color: #1087de;
    border: 1px solid #1087de;
}
.wanggeyuan{
    padding-left: 0.5rem;
    color: #013b65;
    line-height: 160%;
}
.fuzeren{
    padding-left: 0.5rem;
    color: #7d8a93;
}
.fuzeren > span{
 padding-left: 2.5rem;
}
.dizhi{
    display: flex;
    justify-content: space-between;
}
.z-dizhi{
    width: 75%;
    padding-left: 0.5rem;
    color: #7d8a93;
}
.daohang{
    width: 3.8rem;
    height: 1.5rem;
    text-align: center;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    color: #1087de;
    border:1px solid #1087de;
    border-radius: 8px;
}
.daohang > img{
    width: 1rem;
}
.jiancha{
    padding-left: 0.5rem;
    display: flex;
    height: 3rem;
}
.jiancha > div{
    margin: auto 0;
    height: 1.3rem;
    color: #ff5548;
    border:1px solid #ff5548;
    border-radius: 8px;
    line-height: 1.5rem;
}
.jiancha > p{
    padding-left: 0.8rem;
    line-height: 3rem;
    color: #7d8a93;
}

.record{
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
    background: white;
    color: #7d8a93;
    border-radius: 5px;
}
.ti{
    display: flex;
    height: 2.2rem;
    line-height: 2.2rem;
}
.xian{
    width: 0.1rem;
    height: 0.8rem;
    background: #1087de;
    margin: auto 0;
}
.ti > p{
    padding-left: 0.3rem;
}
li{
    height: 1.8rem;
    line-height: 1.8rem;
    border-bottom: 1px solid #f5f5f5;
}
li > p{
    display: flex;
    justify-content: space-between;
}
.button{
    height: 2.5rem;
    background: #1087de;
    color: white;
    font-size: 1.4rem;
    line-height: 2.5rem;
    text-align: center;
}


</style>